<!--
 * @Date: 2023-02-09 13:18:34
 * @LastEditTime: 2023-02-27 14:33:23
 * @FilePath: /hash-guess-game/src/views/club/components/clubInfo.vue
 * 介绍:俱乐部
-->
<script lang="ts" setup>
import CardGlass from "@@/components/CardGlass/CardGlass.vue";
import { _require, formatNumber } from "@@/utils/tools/tools";
import { apiClubInfo } from "@@/api/module/club";
const pageData = reactive<{
  total: number | undefined;
  reward: number | undefined;
}>({
  total: undefined,
  reward: undefined,
});
onActivated(getPageData);
getPageData();
async function getPageData() {
  const res = await apiClubInfo();
  if (!res) return;
  Object.assign(pageData, res);
}
</script>

<template>
  <div class="header_title">{{ $t("ju-le-bu") }}</div>
  <CardGlass
    class="CardGlass__active"
    blur="20rem"
    backstage-bg-color="var(--C-M1)"
  >
    <div class="CardGlass_content flex-A-C auto-ml">
      <Mimage height="98rem" :src="_require('src/assets/iconSvg/ming-xi.svg')">
      </Mimage>
      <div class="auto-mt">
        <p>{{ $t("ju-le-bu-zong-liu-shui") }}</p>
        <p>{{ formatNumber(pageData.total, 4) }}</p>
      </div>
    </div>
  </CardGlass>
  <CardGlass
    class="CardGlass__active"
    @click="$router.push({ name: 'drawCoin' })"
    blur="20rem"
    backstage-bg-color="var(--C-M2)"
  >
    <div class="CardGlass_content flex-A-C auto-ml">
      <Mimage
        height="98rem"
        :src="_require('src/assets/iconSvg/zhuan-zhang.svg')"
      >
      </Mimage>
      <div class="auto-mt">
        <p>{{ $t("sai-shi-zong-jiang-li") }}</p>
        <p>{{ formatNumber(pageData.reward, 4) }}</p>
      </div>
    </div>
  </CardGlass>
</template>

<style lang="less" scoped>
.header_title {
  text-align: center;
  margin: var(--gap-lg) 0;
}
.CardGlass_content {
  padding: var(--gap-md);
}
.CardGlass + .CardGlass {
  margin-top: var(--gap-md);
}
.CardGlass__active {
  &:active {
    background-color: #00000066;
  }
}
</style>
